<template>
  <div>
    <!-- 推荐列表数据 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 下拉加载 -->
      <ul>
        <li v-for="item in list" :key="item">
          <RouterLink :to="'/details/' + item.proid">
            <img :src="item.img1" alt="" />
            <p>{{ item.proname }}</p>
            <span>￥{{ item.originprice }}</span>
          </RouterLink>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { getList } from "../../server/produce";
import { ref } from "vue";
let list = ref<any>([]);
let loading = ref(false);
let finished = ref(false);
let count = ref<any>(1);
let limitNum = ref<any>(10);

function onLoad() {
  // 异步更新数据
  getList(count.value, limitNum.value).then((res) => {
    console.log(res.data);
    list.value = list.value.concat(res.data);
  });
  // 加载状态结束
  loading.value = false;
  count.value++;
  // 数据全部加载完成
  if (list.value.length >= 150) {
    finished.value = true;
  }
}
</script>

<style lang="scss" scoped>
div {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      box-sizing: border-box;
      padding: 10px;
      img {
        display: block;
        width: 100%;
      }
      p {
        font-size: 16px;
        overflow: hidden; /*文本超出隐藏*/
        display: -webkit-box; /*盒子模型微弹性伸缩模型*/
        -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
        -webkit-line-clamp: 1; /*文本显示3行*/
      }
      span {
        color: red;
        font-size: 16px;
      }
    }
  }
}
a {
  color: black;
}
</style>
